<template>
  <div class="data">
    <h1>数据统计</h1>
    <el-card>
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 1600px; height: 760px"></div>
    </el-card>
  </div>
</template>
<script>
// import echarts from "echarts";
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      clazz: [],
      optionData: [],
    };
  },
  created() {
    this.getclazz();
  },
  computed: {
    ...mapGetters(["infoBook", "showClazz"]),
  },
  //   此时 页面上的 dom 已经被渲染完毕了
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "",
      },
      tooltip: {},
      legend: {
        data: ["图书类"],
      },
      xAxis: {
        data: ["历史类", "文学类", "物理类", "哲学类", "故事类"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: this.optionData,
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
  methods: {
    // 获取数据
    getclazz() {
      try {
        this.$store.dispatch("getBookClazz");
        this.clazz = JSON.parse(window.localStorage.getItem("clazz"));
          this.clazz.forEach((item) => {
            this.optionData.push(item.books.length);
          });
      } catch (e) {
        e
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>